<template>
  <main>
    <div id="viewDiv"></div>
  </main>
</template>

<script setup>
import { onMounted } from "vue";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
/**
 * Map: 存放所有图层
 * MapView： 显示图层，并且图层的事件和配置都写在里面（即负责用户的交互）
 */

let mymap = null;
let myview = null;

onMounted(() => {
  initMap();
});
// 初始化地图
const initMap = () => {
  mymap = new Map({
    basemap: "satellite", // 设置地图类型为标注影像混合切片
  });

  myview = new MapView({
    container: "viewDiv", // 挂载在那个DOM
    map: mymap, // 绑定的map对象
    center: [113.5, 23.2], // 设置视图的中心点
    zoom: 8, // 设置视图初始的缩放级别
  });

  myview.ui.remove(["zoom", "attribution"]);  // 把缩放按钮去掉，和把底部的介绍去掉
};
</script>

<style scoped>
#viewDiv {
  width: 100%;
  height: 90vh;
}
</style>
